import React, { useState, useEffect } from 'react'
import { withLogin } from '@/utils/hoc'
import { Layout, Menu, Breadcrumb, Row, Col, Button } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined, YoutubeOutlined, HomeOutlined, ControlOutlined, TeamOutlined, SecurityScanOutlined } from '@ant-design/icons';
import { Switch, Route, Redirect } from 'react-router-dom';
// import store from '@/store'
import { bindActionCreators } from 'redux'

import userAction from '@/store/actions/user'
import { connect } from 'react-redux'
import Home from './manage/Home'
import Access from './manage/Access'
import Interview from './manage/interview/Default'
import User from './manage/user/Default'
// import { withRedux, withStore } from '../utils/hoc';

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

const pathName = {
    '/manage': '首页',
    '/interview': '电视剧管理',
    '/user': '用户管理',
    '/hot': '热门电视剧列表',
    '/American': '美剧列表',
    '/Britain': '英剧列表',
    '/China': '国产剧列表',
    '/HongKong': '港剧列表',
    '/Japan': '日剧列表',
    '/JapaneseAnimation': '日本动画列表',
    '/SouthKorea': '韩剧列表',
    '/documentary': '纪录片列表',
    '/variety':"综艺列表",
    '/add': '添加',
    '/edit': '编辑'
}

const mapStateToProps = function (state, ownProps) {
    console.log('mapStateToProps', state, ownProps)
    return {
        // username:state.userInfo.username,
        // 模块化后
        username: state.user.userInfo.username,
    }
}
const mapDispatchToProps = function (dispatch, ownProps) {
    
    return bindActionCreators(userAction, dispatch)
}

function Manage(props) {
    console.log("manageProps==",props);
    const state = {
        Menu: [
            {
                path: '/home',
                text: '首页',
                icon: <HomeOutlined />,
            },
            {
                path: '/interview',
                text: '电视剧管理',
                icon: <ControlOutlined />,
                children: [
                    {
                        path: '/hot',
                        text: '热门电视剧列表'
                    },
                    {
                        path: '/Britain',
                        text: '英剧列表'
                    },
                    {
                        path: '/American',
                        text: '美剧列表'
                    },
                    {
                        path: '/SouthKorea',
                        text: '韩剧列表'
                    },
                    {
                        path: '/Japan',
                        text: '日剧列表'
                    },
                    {
                        path: '/China',
                        text: '国产剧列表'
                    },
                    {
                        path: '/HongKong',
                        text: '港剧列表'
                    },
                    {
                        path: '/JapaneseAnimation',
                        text: '日本动画列表'
                    },
                    {
                        path: '/variety',
                        text: '综艺列表'
                    },
                    {
                        path: '/documentary',
                        text: '纪录片列表'
                    },
                    {
                        path: '/add',
                        text: '添加电视剧'
                    },
                ]
            },
            {
                path: '/user',
                text: '用户管理',
                icon: <TeamOutlined />,
                children: [
                    {
                        path: '/',
                        text: '用户列表'
                    },
                    {
                        path: '/add',
                        text: '添加用户'
                    },
                ]
            },
            {
                path: '/access',
                text: '权限管理',
                icon: <SecurityScanOutlined />
            }
        ],
        Breadcrumb: [],
        BreadcrumbRoutes: []
    }
    const [menu,setMenu]=useState(state.Menu)
    const [breadcrumb,setBreadcrumb]=useState(state.Breadcrumb)
    const [breadcrumbRoutes,setBreadcrumbRoutes]=useState(state.BreadcrumbRoutes)
    // 使用箭头函数定义类的方法（浏览器已支持）
    const changeMenu = ({ item, key, keyPath, domEvent }) => {
        // console.log('changeMenu', this)
        // this.props.history.push(key)
        props.history.push({
            pathname: key,
        })
    }
    const initBreadCrumb = (location = props.location) => {
        
        const paths = location.pathname.split(/\b(?=\/)/)
        const breadcrumbRoutes = paths.map(item => {
            return {
                path: item,
                breadcrumbName: pathName[item]
            }
        })
        setBreadcrumb(function(){
            return paths
        })
        setBreadcrumbRoutes(function(){
            return breadcrumbRoutes
        })
        
    }
    useEffect(function () {
        // console.log("11111111111111111111111");
        initBreadCrumb()
        props.history.listen(initBreadCrumb)

    },[])

    // console.log('Manage.props', this.props)
    const { userInfo, dispatch, username, logout } = props;
    // const { menu, breadcrumb, breadcrumbRoutes } = this.state;
    const baseUrl = props.match.path;

    // const {userInfo} = store.getState();
    return (
        <Layout style={{ height: '100%' }}>
            <Header className="header" style={{ padding: '0 10px', color: '#fff' }}>
                <Row>
                    <Col span={16} style={{ fontSize:20 }}>
                    
                        <YoutubeOutlined style={{ color: 'red', fontSize: 40, verticalAlign: 'middle', marginRight: 5 }} />
                        豆瓣热门电视剧后台管理系统
                    </Col>
                    <Col span={8} style={{ textAlign: 'right' }}>
                        {username}<Button type="link" onClick={
                            () => {
                                logout(props)
                            }
                        }
                        >退出</Button>
                    </Col>
                </Row>

            </Header>
            <Layout>
                <Sider width={200} className="site-layout-background">
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={[baseUrl + '/home']}
                        // defaultOpenKeys={[baseUrl + '/interview']}
                        style={{ height: '100%', borderRight: 0 }}
                        onClick={changeMenu}
                    >
                        {
                            menu.map(item => {
                                if (item.children) {
                                    return (
                                        <SubMenu key={baseUrl + item.path} icon={item.icon} title={item.text}>
                                            {
                                                item.children.map(it => <Menu.Item key={baseUrl + item.path + it.path}>{it.text}</Menu.Item>)
                                            }
                                        </SubMenu>
                                    )
                                } else {
                                    return <Menu.Item key={baseUrl + item.path} icon={item.icon}>{item.text}</Menu.Item>
                                }
                            })
                        }

                    </Menu>
                </Sider>
                <Layout style={{ padding: '0 24px 24px' }}>
                    
                    <Breadcrumb routes={breadcrumbRoutes}>
                    </Breadcrumb>
                    <Content
                        className="site-layout-background"
                        style={{
                            paddingTop: 10,
                            margin: 0,
                            minHeight: 280,
                        }}
                    >
                        <Switch>
                            <Route path={baseUrl + "/home"} component={Home} />
                            <Route path={baseUrl + "/interview"} component={Interview} />
                            <Route path={baseUrl + "/user"} component={User} />
                            <Redirect from={baseUrl} to={baseUrl + "/home"} />
                        </Switch>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    )

}

Manage = withLogin(Manage)



Manage = connect(
    mapStateToProps,
    mapDispatchToProps
)(Manage)

export default Manage;